<template>
    <div>
        <!-- 头部轮播图 -->
         <div class="box top">
             <van-swipe class="my-swipe" :autoplay="2000"  style="text-align:center" :show-indicators=false :touchable=false border>
                <van-swipe-item v-for="(image, index) in imagesrc" :key="index">
                    <img :src="image.src" style="width:8rem;height:8rem">
                </van-swipe-item>
        </van-swipe>
         </div>
         <!-- 商品介绍以及加入购物车区域 -->
            <div class="box center">
                <h3>{{goodinfo.title}}</h3>
                <p>市场价: <s>￥{{goodinfo.market_price}}</s>  销售价: <span>￥{{goodinfo.sell_price}}</span> </p>
                <div class="stepper">
                     <!-- 步进器的使用 -->
                    <span>购买数量</span> <van-stepper v-model="currentbuy.count" input-width="1.2rem" button-size="1.2rem" integer />
                </div>
                <div>
                    <!-- 立即购买以及加入购物车按钮 -->
                    <van-button type="info" size="mini">立即购买</van-button>
                    <van-button type="danger" size="mini" @click="addShopcar" >加入购物车</van-button>
                </div>
            </div>
            <!-- 商品参数以及图文介绍和商品评论模块 -->
            <div class="box bottom">
                <h3>商品参数</h3>
                <div class="good_xq">
                    <p>商品货号: {{goodinfo.goods_no}}</p>
                    <p>库存情况: {{goodinfo.stock_quantity}}件</p>
                    <p>上架时间: {{goodinfo.add_time}}</p>
                </div>
                <!-- 图文介绍以及商品评论的链接 -->
                <div>
                    <van-button plain type="info" @click="getgoodsJS(goodinfo.id)">图文介绍</van-button>
                    <van-button plain type="danger" @click="getgoodsPL(goodinfo.id)">商品评论</van-button>
                </div>
            </div>
    </div>
</template>
<script>
import { mapState, mapMutations, mapGetters } from 'vuex'
export default {
  data () {
    return {
        //图片详情轮播图
        imagesrc:[],
        //当前商品详细信息
        goodinfo:{},
        //当前购买信息
        currentbuy: {
            id: this.$route.params.id - 0,
            //购买数量
            count:'',
        }
    }
  },
  created() {
      this.getgoodsSwipe()
      this.getgoodinfo()
  },
  methods: {
      //获取轮播图数据
    async getgoodsSwipe() {
        var id = this.$route.params.id - 0
        const {data: res} = await this.$http.get(`/api/getthumimages/${id}`)
        this.imagesrc = res.message
    },
    //获取当前商品详细信息
    async getgoodinfo() {
        var id = this.$route.params.id - 0
        const {data: res} = await this.$http.get(`/api/goods/getinfo/${id}`)
        this.goodinfo = res.message[0]
    },
    //跳转到图文介绍页面
    getgoodsJS(id) {
        this.$router.push('/goodsdesc/'+id)
    },
    //跳转到商品评论界面
    getgoodsPL(id) {
        this.$router.push('/goodscomments/'+id)
    },
    //点击添加购物车是
    addShopcar() {     
        this.$store.dispatch('addShopcar',this.currentbuy)
        this.$message.success('已加入购物车');
    },
    ...mapMutations(['addShopcarinfo'])
  },
  computed:{
    ...mapState(['goodslist']),
}
}
</script>
<style scoped lang="less">
 .box {
     border: 0.5px solid #ccc;
     box-sizing: border-box;
     margin: 10px;
     padding: 15px;
 }
 .top {
     height: 150px;
 }
h3 {
    font-weight: normal;
     font-size: 0.7rem;
     border-bottom: 0.5px solid #ccc;
    
    }
 .center {
    p {
        margin: 5px;
        font-size: 0.6rem;
        color: #8f8f94;
        span {
            font-weight: 700;
            color: red;
        }
    }
    .stepper {
        vertical-align: center;
        height: 30px;
        span {
            font-size: 0.6rem;
             color: #8f8f94;
        }
        .van-stepper {
        display: inline-block;
    }
    }
    .van-button {
        font-size: 0.5rem;
    }
    
 }
 .bottom {
     .good_xq {
         padding: 10px;
         border-bottom: 0.5px solid #ccc;
         margin-bottom: 10px;
     }
      p {
        margin: 5px;
        font-size: 0.6rem;
        color: #8f8f94;
      }
      .van-button {
          width: 100%;
          height: 30px;
          line-height: 30px;
          margin-bottom: 10px;
          font-size: 0.7rem;
          border-radius: 5px;
      }
 }
</style>